<template>
	<view>
		<scroll-view scroll-x="true" class="scroll-X">
			<view class="sjs">
				<view class="item" v-for="(item, index) in sjs" :key="index" :class="{active: item.active}">
					<image :src="item.sjavatar"></image>
				</view>
			</view>
		</scroll-view>
    <view class="jfItem flex-btw">
      <view class="left">
        <image class="jifenI" src="../../static/imgs/vip/hyk_jf@2x.png" />
        <text class="t">积分</text>
        <text class="s">{{jifen}}</text>
        <image @click="$refs['jfsmpopup'].open();" class="wenhaoI" src="../../static/imgs/vip/hyk_xq@2x.png" />
      </view>
      <view class="right">
        <button class="btn" @click="duihuan()">兑换</button>
        <button class="btn" @click="showJfmx()">积分明细</button>
      </view>
    </view>
		
	<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y">
		<view class="orderList">
			<view class="item flex-btw" v-for="(item, index) in orders" :key="index" :class="{inactive: !item.active}">
				<view class="card" @click="showCardDetail(item)">
					<image class="cardImg" :src="item.cardImg"></image>
					<view class="sjavatar">
						<image :src="item.sjavatar" mode=""></image>
					</view>
					<text class="sjname">{{item.sjname}}</text>
					<text class="cardType">{{item.cardType}}</text>
				</view>
			</view>
		</view>
	</scroll-view>

  <!-- 积分说明 -->
  <uni-popup ref="jfsmpopup" type="center" @change="handlerPopupStatusChenge($event, 'showJfsmPopup')">
			<view id="jfsmpopup">
        <view class="title">
          <image class="l" src="../../static/imgs/vip/hyk_jfsm@2x.png"/>
          <view class="t">积分说明</view>
        </view>
        <view class="sx">
          <image class="s" src="../../static/imgs/vip/hyk_jfsm_sm@2x.png"/>
          <view class="ms">
            <text>获得积分</text>
            <text>积分兑换</text>
            <text>礼物到手</text>
          </view>
        </view>
        <scroll-view class="c" scroll-y="true">
          <text>
            1.内容\n
            2.内容内容内容内容内容内容内容内容内容内容内容\n 
            3.内容内容内容内容内容内容内容内容内容内容内容\n
          </text>
        </scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var img1 = require('../../static/test/a5.jpg');
	var img2 = require('../../static/test/a4.jpg');
	!img1.startsWith('/') && (img1 = '/' + img1);
	!img2.startsWith('/') && (img2 = '/' + img2);
	export default {
		data() {
			return {
        showJfsmPopup: false,
				sjs: [
					{sjavatar: img2, active: true},
					{sjavatar: img1, active: false},
					{sjavatar: img1, active: false},
					{sjavatar: img1, active: false}
        ],
        orders: [
          {cardImg: img1, sjavatar: img2, sjname: '舞邦工作室', cardType: '年卡', active: true},
          {cardImg: img1, sjavatar: img2, sjname: '舞邦工作室', cardType: '年卡', active: true},
          {cardImg: img1, sjavatar: img2, sjname: '舞邦工作室', cardType: '年卡', active: false},
          {cardImg: img1, sjavatar: img2, sjname: '舞邦工作室', cardType: '年卡', active: false}
        ],
        jifen: 110,
			}
    },
    onBackPress() {
			if (this.showJfsmPopup) {
				this.$refs['jfsmpopup'].close();
				return true;
			}
		},
		methods: {
      handlerPopupStatusChenge: function(e) {
				this['showJfsmPopup'] = e.show;
      },
      duihuan: function () {
        uni.navigateTo({url: '/pages/vipcard/duihuan'});
      },
      showJfmx: function () {
        uni.navigateTo({url: '/pages/vipcard/jifenDetail'});
      },
			showCardDetail: function () {
				uni.navigateTo({url: '/pages/vipcard/cardDetail'});
			}
		},
		onLoad() {
		}
	}
</script>

<style lang="scss" scoped>
.scroll-X {
	margin: 0 10pt;
	width: calc(100vw - 20pt);
}
.scroll-Y {
	background: #f5f5f5;
	height: calc(100vh - 115px);
	// #ifdef H5
	height: calc(100vh - 44px - 115px);
	// #endif
}
.sjs {
	height: 55px;
	display: flex;
	align-items: flex-end;
	padding-bottom: 10px;
	.item {
		max-height: 40px;
		max-width: 40px;
		min-height: 40px;
		min-width: 40px;
		height: 40px;
		width: 40px;
		margin-right: 8px;
		position: relative;
		&.active {
			max-height: 48px;
			max-width: 48px;
			min-height: 48px;
			min-width: 48px;
			height: 48px;
			width: 48px;
			&::after {
        content: '';
        position: absolute;
        width: 40%;
        height: 4px;
        background: #000;
        left: 13px;
        bottom: -10px;
			}
		}
		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
}
.jfItem {
	height: 40px;
    padding: 5px 10pt;
  .left {
    display: flex;
    align-items: center;
    flex-grow: 1;
    .jifenI {width: 22px; height: 22px;margin-right: 8px;}
    .t {font-size: 13px;margin-right: 8px;}
    .s {font-size: 12px;  color: #ff0000;margin-right: 8px;}
    .wenhaoI {
      width: 14px; height: 14px;
    }
  }
  .right {
    display: flex;
    align-items: center;
    .btn {
      height: 22px;line-height: 22px;font-size: 12px;color: #fff;background: #000;
	  border-radius: 20px;
	  margin: 0 5px;
    }
  }
}
	.orderList {
		.item {
      position: relative;
      padding: 10pt 15pt;
			.card {
				position: relative;
        width: 100%;
        height: 320rpx;
				.cardImg {
					width: 100%;
					height: 100%;
					border-radius: 10px;
				}
				.sjavatar {
					position: absolute;
					top: 10px;
					left: 10px;
					image {
						width: 35px;
						height: 35px;
						border-radius: 50%;
					}
				}
				.sjname {
          color: #fff;
          font-size: 14px;
          position: absolute;
          left: 50px;
          top: 16px;
				}
				.cardType {
					color: #fff;
					font-size: 22px;
					position: absolute;
					top: 40%;
					width: 100%;
					text-align: center;
					left: 0;
				}
      }
      &.inactive::after {
        content: '';
        position: absolute;
        background: url(../../static/imgs/vip/hyk_yyw@2x.png);
        width: 80px;
        height: 80px;
        right: 20px;
        top: 10px;
        background-size: 100%;
      }
		}
  }
  
  #jfsmpopup {
    background: #fff;
    width: 240px;
    border-radius: 10px;
    height: 260px;
    position: absolute;
    left: calc(50% - 120px);
    top: calc(50% - 130px);
    .title {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      .l {
        width: 40px;
        height: 40px;
        margin-right: 10px;
      }
      .t {
        font-size: 20px
      }
    }
    .sx {
      display: flex;
      flex-direction: column;
      align-items: center;
      .s{
        width: 164px;
        height: 16px;
      }
      .ms {
        display: flex;
        justify-content: space-between;
        width: 200px;
        text {
          display: block;
          font-size: 12px;
          color: #bdbdbd;
        }
      }
    }
    .c {
      padding: 10pt;
      font-size: 13px;
      box-sizing: border-box;
      height: calc(260px - 60px - 37px);
    }
  }
</style>